JavaScript'i tuleviku avamine: põhjalik ülevaade atribuutide mustrisobitusest

Pidevalt arenevas tarkvaraarenduse maastikul otsivad arendajad pidevalt tööriistu ja paradigmasid, mis muudavad koodi loetavamaks, hooldatavamaks ja robustsemaks. Aastaid on JavaScripti arendajad kadedusega vaadanud keeli nagu Rust, Elixir ja F# ühe eriti võimsa funktsiooni pärast: mustrisobitus. Hea uudis on see, et see revolutsiooniline funktsioon on JavaScripti jaoks silmapiiril ja selle kõige mõjukam rakendus võib olla just see, kuidas me objektidega töötame.

See juhend viib teid põhjalikule sukeldumisele JavaScripti jaoks pakutud atribuutide mustrisobituse funktsiooni. Uurime, mis see on, milliseid probleeme see lahendab, selle võimsat süntaksit ja praktilisi, reaalseid stsenaariume, kus see muudab teie koodikirjutamise viisi. Olenemata sellest, kas töötlete keerulisi API vastuseid, haldate rakenduse olekut või käsitlete polümorfseid andmestruktuure, on mustrisobitusest saamas asendamatu tööriist teie JavaScripti arsenalis.

Mis täpselt on mustrisobitus?

Oma olemuselt on mustrisobitus mehhanism väärtuse kontrollimiseks mitmete "mustrite" vastu. Muster kirjeldab oodatavate andmete kuju ja omadusi. Kui väärtus sobib mustriga, käivitatakse vastav koodiplokk. Mõelge sellest kui supervõimsast `switch` avaldisest, mis suudab kontrollida mitte ainult lihtsaid väärtusi nagu stringe või numbreid, vaid ka teie andmete struktuuri ennast, sealhulgas teie objektide atribuute.

Kuid see on enamat kui lihtsalt `switch` avaldis. Mustrisobitus ühendab endas kolm võimsat kontseptsiooni:

• Kontrollimine: See kontrollib, kas objektil on teatud struktuur (nt kas sellel on atribuut `status` väärtusega 'success'?).
• Destruktureerimine: Kui struktuur sobib, saab see samaaegselt eraldada väärtused sellest struktuurist kohalikesse muutujatesse.
• Juhtimisvoog: See suunab programmi täitmist selle põhjal, milline muster edukalt sobitati.

See kombinatsioon võimaldab teil kirjutada väga deklaratiivset koodi, mis väljendab selgelt teie kavatsust. Selle asemel, et kirjutada järjestikuseid imperatiivseid käske andmete kontrollimiseks ja lahtiharutamiseks, kirjeldate teid huvitavate andmete kuju ja mustrisobitus tegeleb ülejäänuga.

Probleem: objektide kontrollimise paljusõnaline maailm

Enne kui sukeldume lahendusse, hindame probleemi. Iga JavaScripti arendaja on kirjutanud koodi, mis näeb välja umbes selline. Kujutage ette, et käsitleme API vastust, mis võib esindada kasutaja andmepäringu erinevaid olekuid.

            
function handleApiResponse(response) {
  if (response && typeof response === 'object') {
    if (response.status === 'success' && response.data) {
      if (Array.isArray(response.data.users) && response.data.users.length > 0) {
        console.log(`Processing ${response.data.users.length} users.`);
        // ... logic to process users
      } else {
        console.log('Request successful, but no users found.');
      }
    } else if (response.status === 'error') {
      if (response.error && response.error.code === 404) {
        console.error('Error: The requested resource was not found.');
      } else if (response.error && response.error.code >= 500) {
        console.error(`A server error occurred: ${response.error.message}`);
      } else {
        console.error('An unknown error occurred.');
      }
    } else if (response.status === 'pending') {
      console.log('The request is still pending. Please wait.');
    } else {
      console.warn('Received an unrecognized response structure.');
    }
  } else {
    console.error('Invalid response format received.');
  }
}

            

              
                Copy
              
            
          

See kood töötab, kuid sellel on mitmeid probleeme:

• Kõrge tsüklomaatiline keerukus: Sügavalt pesastatud `if/else` avaldised loovad keerulise loogikavõrgu, mida on raske jälgida ja testida.
• Vigadealdis: Lihtne on unustada `null` kontrolli või tekitada loogikaviga. Näiteks, mis siis, kui `response.data` eksisteerib, aga `response.data.users` mitte? See võib põhjustada käitusaegse vea.
• Halb loetavus: Koodi eesmärk on varjutatud olemasolu, tüüpide ja väärtuste kontrollimise standardkoodiga. On raske saada kiiret ülevaadet kõigist võimalikest vastuse kujudest, mida see funktsioon käsitleb.
• Raske hooldada: Uue vastuse oleku lisamine (nt `'throttled'` staatus) nõuab hoolikat õige koha leidmist uue `else if` ploki lisamiseks, mis suurendab regressiooni riski.

Lahendus: deklaratiivne sobitamine atribuutide mustritega

Nüüd vaatame, kuidas atribuutide mustrisobitus saab selle keerulise loogika ümber kujundada millekski puhtaks, deklaratiivseks ja robustseks. Kavandatav süntaks kasutab `match` avaldist, mis hindab väärtust mitmete `case` klauslite vastu.

Vastutusest loobumine: lõplik süntaks võib muutuda, kui ettepanek liigub läbi TC39 protsessi. Allolevad näited põhinevad ettepaneku praegusel seisul.

            
function handleApiResponseWithPatternMatching(response) {
  match (response) {
    case { status: 'success', data: { users: [firstUser, ...rest] } }:
      console.log(`Processing ${1 + rest.length} users.`);
      // ... logic to process users
      break;

    case { status: 'success' }:
      console.log('Request successful, but no users found or data is in an unexpected format.');
      break;

    case { status: 'error', error: { code: 404 } }:
      console.error('Error: The requested resource was not found.');
      break;

    case { status: 'error', error: { code: as c, message: as msg } } if (c >= 500):
      console.error(`A server error occurred (${c}): ${msg}`);
      break;

    case { status: 'error' }:
      console.error('An unknown error occurred.');
      break;

    case { status: 'pending' }:
      console.log('The request is still pending. Please wait.');
      break;

    default:
      console.error('Invalid or unrecognized response format received.');
      break;
  }
}

            

              
                Copy
              
            
          

Erinevus on nagu öö ja päev. See kood on:

• Lame ja loetav: Lineaarne struktuur teeb kõikide võimalike juhtumite hetkega nägemise lihtsaks. Iga `case` kirjeldab selgelt käsitletavate andmete kuju.
• Deklaratiivne: Me kirjeldame mida me otsime, mitte kuidas seda kontrollida.
• Turvaline: Muster tegeleb kaudselt `null` või `undefined` atribuutide kontrollimisega piki teed. Kui `response.error` ei eksisteeri, siis seda sisaldavad mustrid lihtsalt ei sobi, vältides käitusaegseid vigu.
• Hooldatav: Uue juhtumi lisamine on sama lihtne kui uue `case` ploki lisamine, minimaalse riskiga olemasolevale loogikale.

Süvasukeldumine: täiustatud atribuutide mustrisobituse tehnikad

Atribuutide mustrisobitus on uskumatult mitmekülgne. Vaatame lähemalt peamisi tehnikaid, mis muudavad selle nii võimsaks.

1. Atribuutide väärtuste sobitamine ja muutujate sidumine

Kõige elementaarsem muster hõlmab atribuudi olemasolu ja selle väärtuse kontrollimist. Kuid selle tegelik võimsus tuleneb teiste atribuutide väärtuste sidumisest uute muutujatega.

            
const user = {
  id: 'user-123',
  role: 'admin',
  preferences: {
    theme: 'dark',
    language: 'en'
  }
};

match (user) {
  // Match the role and bind the id to a new variable 'userId'
  case { role: 'admin', id: as userId }:
    console.log(`Admin user detected with ID: ${userId}`);
    // 'userId' is now 'user-123'
    break;

  // Using shorthand similar to object destructuring
  case { role: 'editor', id }:
    console.log(`Editor user detected with ID: ${id}`);
    break;

  default:
    console.log('User is not a privileged user.');
    break;
}

            

              
                Copy
              
            
          

Näidetes kontrollivad nii `id: as userId` kui ka lühivorm `id` mõlemad `id` atribuudi olemasolu ja seovad selle väärtuse muutujaga (`userId` või `id`), mis on saadaval `case` ploki skoobis. See ühendab kontrollimise ja eraldamise üheks elegantseks operatsiooniks.

2. Pesastatud objekti- ja massiivimustrid

Mustreid saab pesastada mis tahes sügavusele, võimaldades teil deklaratiivselt kontrollida ja destruktureerida keerulisi, hierarhilisi andmestruktuure hõlpsalt.

            
function getPrimaryContact(data) {
  match (data) {
    // Match a deeply nested email property
    case { user: { contacts: { email: as primaryEmail } } }:
      console.log(`Primary email found: ${primaryEmail}`);
      break;

    // Match if the 'contacts' is an array with at least one item
    case { user: { contacts: [firstContact, ...rest] } } if (firstContact.type === 'email'):
      console.log(`First contact email is: ${firstContact.value}`);
      break;

    default:
      console.log('No primary contact information available in the expected format.');
      break;
  }
}

getPrimaryContact({ user: { contacts: { email: 'test@example.com' } } });
getPrimaryContact({ user: { contacts: [{ type: 'email', value: 'info@example.com' }, { type: 'phone', value: '123' }] } });

            

              
                Copy
              
            
          

Pange tähele, kuidas saame sujuvalt segada objekti atribuutide mustreid (`{ user: ... }`) massiivimustritega (`[firstContact, ...rest]`), et täpselt kirjeldada andmete kuju, mida sihtime.

3. Valvurite (`if` klauslite) kasutamine keerulise loogika jaoks

Mõnikord ei piisa kuju sobitamisest. Teil võib olla vaja kontrollida tingimust, mis põhineb atribuudi väärtusel. Siin tulevad appi valvurid. `case`-ile saab lisada `if` klausli, et pakkuda täiendavat, suvalist tõeväärtuskontrolli.

`case` sobitub ainult siis, kui muster on struktuuriliselt korrektne JA valvuri tingimus on `true`.

            
function processTransaction(tx) {
  match (tx) {
    case { type: 'purchase', amount } if (amount > 1000):
      console.log(`High-value purchase of ${amount} requires fraud check.`);
      break;

    case { type: 'purchase' }:
      console.log('Standard purchase processed.');
      break;

    case { type: 'refund', originalTx: { date: as txDate } } if (isOlderThan30Days(txDate)):
      console.log('Refund request is outside the allowable 30-day window.');
      break;

    case { type: 'refund' }:
      console.log('Refund processed.');
      break;

    default:
      console.log('Unknown transaction type.');
      break;
  }
}

            

              
                Copy
              
            
          

Valvurid on olulised kohandatud loogika lisamiseks, mis läheb kaugemale lihtsatest struktuuri- või väärtusvõrdsuse kontrollidest, muutes mustrisobituse tõeliselt terviklikuks tööriistaks keeruliste äriloogikate käsitlemiseks.

4. Ülejäänud atribuutide (`...`) kogumine

Nagu ka objektide destruktureerimisel, saate kasutada ülejäägi süntaksit (`...`), et koguda kõik atribuudid, mida mustris selgesõnaliselt ei mainitud. See on uskumatult kasulik andmete edastamiseks või uute objektide loomiseks ilma teatud atribuutideta.

            
function logUserAndForwardData(event) {
  match (event) {
    case { type: 'user_login', timestamp, userId, ...restOfData }:
      console.log(`User ${userId} logged in at ${new Date(timestamp).toISOString()}`);
      // Forward the rest of the data to another service
      analyticsService.track('login', restOfData);
      break;

    case { type: 'user_logout', userId, ...rest }:
      console.log(`User ${userId} logged out.`);
      // The 'rest' object will contain any other properties on the event
      break;
      
    default:
      // Handle other event types
      break;
  }
}

            

              
                Copy
              
            
          

Praktilised kasutusjuhud ja reaalse maailma näited

Liigume teooriast praktikasse. Kus avaldab atribuutide mustrisobitus teie igapäevatöös kõige suuremat mõju?

1. kasutusjuht: olekuhaldus kasutajaliidese raamistikes (React, Vue jne)

Kaasaegne esiotsa arendus keerleb oleku haldamise ümber. Komponent eksisteerib sageli ühes mitmest diskreetsest olekust: `idle`, `loading`, `success` või `error`. Mustrisobitus sobib ideaalselt kasutajaliidese renderdamiseks selle olekuobjekti põhjal.

Mõelge Reacti komponendile, mis hangib andmeid:

            
// Olekuobjekt võib välja näha:
// { status: 'loading' }
// { status: 'success', data: [...] }
// { status: 'error', error: { message: '...' } }

function DataDisplay({ state }) {
  // match-avaldis võib tagastada väärtuse (nagu JSX)
  return match (state) {
    case { status: 'loading' }:
      return <Spinner />;

    case { status: 'success', data }:
      return <DataTable items={data} />;

    case { status: 'error', error: { message } }:
      return <ErrorDisplay message={message} />;

    default:
      return <p>Please click the button to fetch data.</p>;
  };
}

            

              
                Copy
              
            
          

See on palju deklaratiivsem ja vähem vigadealdis kui `if (state.status === ...)` kontrollide ahel. See koondab oleku kuju ja vastava kasutajaliidese, muutes komponendi loogika koheselt arusaadavaks.

2. kasutusjuht: täiustatud sündmuste käsitlemine ja marsruutimine

Sõnumipõhises arhitektuuris või keerulises sündmuste käsitlejas saate sageli erineva kujuga sündmuste objekte. Mustrisobitus pakub elegantset viisi nende sündmuste suunamiseks õigele loogikale.

            
function handleSystemEvent(event) {
  match (event) {
    case { type: 'payment', payload: { method: 'credit_card', amount } }:
      processCreditCardPayment(amount, event.payload);
      break;

    case { type: 'payment', payload: { method: 'paypal', transactionId } }:
      verifyPaypalPayment(transactionId);
      break;

    case { type: 'notification', payload: { recipient, message } } if (recipient.startsWith('sms:')):
      sendSmsNotification(recipient, message);
      break;

    case { type: 'notification', payload: { recipient, message } } if (recipient.includes('@')):
      sendEmailNotification(recipient, message);
      break;
      
    default:
      logUnhandledEvent(event.type);
      break;
  }
}

            

              
                Copy
              
            
          

3. kasutusjuht: konfiguratsiooniobjektide valideerimine ja töötlemine

Kui teie rakendus käivitub, peab see sageli töötlema konfiguratsiooniobjekti. Mustrisobitus aitab seda konfiguratsiooni valideerida ja rakendust vastavalt seadistada.

            
function initializeApp(config) {
  console.log('Initializing application...');
  match (config) {
    case { mode: 'production', api: { url: apiUrl }, logging: { level: 'error' } }:
      configureForProduction(apiUrl, 'error');
      break;

    case { mode: 'development', api: { url: apiUrl, mock: true } }:
      configureForDevelopment(apiUrl, true);
      break;
      
    case { mode: 'development', api: { url } }:
      configureForDevelopment(url, false);
      break;

    default:
      throw new Error('Invalid or incomplete configuration provided.');
  }
}

            

              
                Copy
              
            
          

Atribuutide mustrisobituse kasutuselevõtu eelised

• Selgus ja loetavus: Kood muutub isedokumenteerivaks. `match` plokk toimib selge loendina andmestruktuuridest, mida teie kood eeldab käsitlevat.
• Vähem standardkoodi: Jätke hüvasti korduvate ja paljusõnaliste `if-else` ahelate, `typeof` kontrollide ja atribuutidele juurdepääsu kaitsemehhanismidega.
• Suurem turvalisus: Struktuurile sobitades väldite olemuslikult paljusid `TypeError: Cannot read properties of undefined` vigu, mis vaevavad JavaScripti rakendusi.
• Parem hooldatavus: `case` plokkide lame ja eraldatud olemus muudab konkreetsete andmekujude loogika lisamise, eemaldamise või muutmise lihtsaks, mõjutamata teisi juhtumeid.
• Tulevikukindlus täielikkuse kontrolliga: TC39 ettepaneku üks peamisi eesmärke on lõpuks võimaldada täielikkuse kontrolli. See tähendab, et kompilaator või käitusaeg võiks teid hoiatada, kui teie `match` plokk ei käsitle kõiki võimalikke tüübi variante, kõrvaldades seega terve klassi vigu.

Praegune staatus ja kuidas seda täna proovida

2023. aasta lõpu seisuga on mustrisobituse ettepanek TC39 protsessi 1. etapis. See tähendab, et funktsiooni uuritakse ja defineeritakse aktiivselt, kuid see ei ole veel ametliku ECMAScripti standardi osa. Süntaks ja semantika võivad enne lõplikku vormistamist veel muutuda.

Seega ei tohiks te seda veel kasutada standardseid veebilehitsejaid või Node.js keskkondi sihtivas produktsioonikoodis.

Siiski saate sellega juba täna katsetada, kasutades Babelit! JavaScripti kompilaator võimaldab teil kasutada tulevasi funktsioone ja transpileerida need ühilduvaks koodiks. Mustrisobituse proovimiseks saate kasutada `@babel/plugin-proposal-pattern-matching` pistikprogrammi.

Hoiatuseks

Kuigi katsetamine on soovitatav, pidage meeles, et töötate kavandatava funktsiooniga. Sellele tuginemine kriitilistes projektides on riskantne, kuni see jõuab TC39 protsessi 3. või 4. etappi ja saab laialdase toe peamistes JavaScripti mootorites.

Kokkuvõte: tulevik on deklaratiivne

Atribuutide mustrisobitus esindab olulist paradigmamuutust JavaScripti jaoks. See liigutab meid eemale imperatiivsest, samm-sammulisest andmete kontrollimisest ja lähemale deklaratiivsemale, väljendusrikkamale ja robustsemale programmeerimisstiilile.

Lubades meil kirjeldada "mida" (meie andmete kuju) selle asemel, et kirjeldada "kuidas" (tüütud kontrollimise ja eraldamise sammud), lubab see puhastada mõned meie koodibaaside kõige keerulisemad ja vigadealtimad osad. Alates API andmete käsitlemisest kuni oleku haldamise ja sündmuste suunamiseni on selle rakendused laiad ja mõjukad.

Hoidke TC39 ettepaneku edenemisel teravalt silma peal. Alustage sellega katsetamist oma isiklikes projektides. JavaScripti deklaratiivne tulevik on kuju võtmas ja mustrisobitus on selle keskmes.